<template>
	<view class="rider-shop">
		<NavBar title="个人信息"/>
		<view class="rider-info">
			<view class="user-info">
				<view class="item">
					<view class="label"> 头像 </view>
					<view class="value" @tap="chooseAvatar">
						<image :src="userInfo.avatar" class="avatar" />
						<image src="/static/icon/order/right.png" class="right" />
					</view>
				</view>
				<view class="item">
					<view class="label"> 姓名 </view>
					<view class="value"> {{userInfo.apply.name || userInfo.name}} </view>
				</view>
				<view class="item">
					<view class="label"> 手机号 </view>
					<view class="value">
						<text> {{ userInfo.apply.mobile || userInfo.mobile }} </text>
						<image src="/static/icon/rider/edit.png" class="edit" @tap="editPhone" />
					</view>
				</view>
			</view>
			<view class="job-info">
				<view class="item">
					<view class="label"> 工作城市 </view>
					<view class="value"> {{userInfo.apply.site_code || userInfo.apply.region}} </view>
				</view>
				<view class="item">
					<view class="label"> 工作地点 </view>
					<view class="value"> {{userInfo.apply.site_code || userInfo.apply.region_info}} </view>
				</view>
				<view class="item" v-if="pageType == '骑手'">
					<view class="label"> 证件号 </view>
					<view class="value"> {{userInfo.apply.id_code}} </view>
				</view>
				<view class="id-box">
					<view class="label"> 证件 </view>
					<view class="id"> 
						<view class="id-item" @tap="previewImg([userInfo.apply.id_img_1])">
							<image :src="userInfo.apply.id_img_1" class="i-img"/>
							<view class="text"> 身份证正面 </view>
						</view>
						<view class="id-item" @tap="previewImg([userInfo.apply.id_img_2])">
							<image :src="userInfo.apply.id_img_2" class="i-img"/>
							<view class="text"> 身份证反面 </view>
						</view>
						<view class="id-item" @tap="previewImg([userInfo.apply.id_img_3])">
							<image :src="userInfo.apply.id_img_3" class="i-img"/>
							<view class="text"> 手持身份证 </view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import { previewImg } from '@/utils/index.js'
	import { EditRiderInfoApi, uploadImgApi } from '@/service/rider.js'
	const pageType = ref()
	const userInfo = ref({})
	const chooseAvatar = () => {
		if(pageType.value !='骑手') return
		uni.chooseImage({
			count: 1,
			sizeType: 'original',
			success: (res) => {
				uploadImgApi(res.tempFilePaths[0]).then(res => {
					EditRiderInfoApi({avatar: res.id}).then(yes => {
						userInfo.value.avatar = res.path
					})
				})
			}
		})
	}
	const editPhone = () => {
		uni.navigateTo({
			url: '/pages/riderAndShopInfo/editPhone/editPhone'
		})
	}
	onLoad((e) => {
		const { title, info } = e
		pageType.value = title
		userInfo.value = JSON.parse(info)
		console.log(userInfo.value, pageType.value);
	})
</script>

<style scoped lang="scss">
	.rider-info {
		padding: 10px 12px;
		.user-info, .job-info {
			padding: 0 12px;
			margin-bottom: 10px;
			border-radius: 10px;
			background-color: #fff;
			.item {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.label {
					color: #333333;
					font-size: 14px;
					font-weight: 400;
				}
				.value {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					display: flex;
					align-items: center;
					.avatar {
						width: 36px;
						height: 36px;
						border-radius: 50%;
					}
					.right {
						width: 14px;
						height: 14px;
						margin-left: 9px;
					}
					.edit {
						width: 20px;
						height: 20px;
						margin-left: 8px;
					}
				}
			}
			.id-box {
				padding: 20px 4px 15px;
				.label {
					color: #333333;
					font-size: 16px;
					font-weight: 400;
					line-height: 20px;
					margin-bottom: 20px;
				}
				.id {
					display: grid;
					gap: 10px 10px;
					grid-template-columns: repeat(2, 1fr);
					.id-item {
						text-align: center;
						.i-img {
							width: 154px;
							height: 99px;
							margin-bottom: 6px;
						}
						.text {
							color: #999999;
							font-size: 14px;
							font-weight: 400;
							line-height: 20px;
						}
					}
				}
			}
		}
	}
</style>
